<template>
  <div
    class="glassmorphism"
    :style="cardStyle"
    @mouseover="hover = true"
    @mouseleave="hover = false"
  >
    <slot />
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'

const props = defineProps({
  width: { type: [String, Number], default: undefined },
  height: { type: [String, Number], default: undefined },
  borderRadius: { type: [String, Number], default: undefined },
  blur: { type: [String, Number], default: undefined },
  saturate: { type: [String, Number], default: undefined },
  opacity: { type: Number, default: undefined },
  cardColor: { type: String, default: undefined },
  borderWidth: { type: [String, Number], default: undefined },
  borderColor: { type: String, default: undefined },
  glow: { type: Boolean, default: undefined },
  scale: { type: Number, default: undefined },
  disableHoverEffect: { type: Boolean, default: false },
  yihenStyle: { type: String, default: '' },
})

const hover = ref(false)

const presetStyles = {
  Dark: {
    width: '400px',
    height: '500px',
    cardColor: '#00000080',
    blur: '15px',
    saturate: '140%',
    borderRadius: '16px',
    boxShadow: '0 2px 12px 0 #0000001a',
    opacity: 0.65,
    borderWidth: 1,
    borderColor: '#ffffff1a',
    glow: true,
    transition: 'all 0.3s ease',
    scale : 1.02,
  },
   Classic: {
    width: '400px',
    height: '500px',
    cardColor: '#ffffff48',
    blur: '16px',
    saturate: '180%',
    borderRadius: '12px',
    boxShadow: '0 8px 32px 0 #1f267a5e',
    opacity: 1,
    transition: 'all 0.3s ease',
    borderWidth: 1,
    borderColor: '#ffffff20',
    glow: true,
    scale : 1.02,
    },

   Modern: {
    width: '400px',
    height: '500px',
    cardColor: '#ffffff48',
    blur: '12px',
    saturate: '150%',
    borderRadius: '12px',
    boxShadow: '0 4px 16px 0 #0000001a',
    opacity: 0.7,
    transition: 'all 0.3s ease',
    borderWidth: 1,
    borderColor: '#fafafa24',
    glow: true,
    scale : 1.02,
    },

   Minimal: {
    width: '400px',
    height: '500px',
    cardColor: '#ffffff30',
    blur: '8px',
    saturate: '120%',
    borderRadius: '8px',
    boxShadow: '0 2px 8px 0 #0000000d',
    opacity: 0.85,
    transition: 'all 0.3s ease',
    borderWidth: 1,
    borderColor: '#ffffff30',
    glow: true,
    scale : 1.02,
    },

   Mobile: {
    width: '400px',
    height: '500px',
    cardColor: '#ffffff50',
    blur: '12px',
    saturate: '170%',
    borderRadius: '20px',
    boxShadow: '0 2px 8px 0 #0000000d',
    opacity: 0.8,
    transition: 'all 0.3s ease',
    borderWidth: 1,
    borderColor: '#ffffff0d',
    glow: false,
    disableHoverEffect: true,
    scale : 1,
    },
}

const defaultStyles = {
  width: '400px',
  height: '500px',
  borderRadius: '24px',
  blur: '23px',
  saturate: '180%',
  opacity: 0.63,
  cardColor:'#ffffff48',
  borderWidth: 0,
  borderColor: '#ffffff33',
  glow: false,
  boxShadow: '0 4px 18px 0 #0000001a',
  scale : 1.02
}

const cardStyle = computed(() => {
  const preset = props.yihenStyle && presetStyles[props.yihenStyle] ? presetStyles[props.yihenStyle] : {}
  // 优先级：props > preset > default
  const width = props.width ?? preset.width ?? defaultStyles.width
  const height = props.height ?? preset.height ?? defaultStyles.height
  const borderRadius = props.borderRadius ?? preset.borderRadius ?? defaultStyles.borderRadius
  const cardColor = props.cardColor ?? preset.cardColor ?? defaultStyles.cardColor
  const blur = props.blur ?? preset.blur ?? defaultStyles.blur
  const saturate = props.saturate ?? preset.saturate ?? defaultStyles.saturate
  const opacity = props.opacity ?? preset.opacity ?? defaultStyles.opacity
  const borderWidth = props.borderWidth ?? preset.borderWidth ?? defaultStyles.borderWidth
  const borderColor = props.borderColor ?? preset.borderColor ?? defaultStyles.borderColor
  const glow = props.glow ?? preset.glow ?? defaultStyles.glow
  const transition = props.transition ?? preset.transition ?? defaultStyles.transition
  const scale = props.scale ?? preset.scale ?? defaultStyles.scale
  const disableHoverEffect = props.disableHoverEffect ?? preset.disableHoverEffect ?? defaultStyles.disableHoverEffect
  const boxShadow = hover.value && glow
    ? '0 0 20px #ffffff4d, 0 0 40px #ffffff33, 0 0 60px #ffffff1a'
    : (preset.boxShadow || defaultStyles.boxShadow)

  return {
    width: typeof width === 'number' ? width + 'px' : width,
    height: typeof height === 'number' ? height + 'px' : height,
    borderRadius: typeof borderRadius === 'number' ? borderRadius + 'px' : borderRadius,
    background: cardColor,
    backdropFilter: `blur(${blur}) saturate(${saturate})`,
    WebkitBackdropFilter: `blur(${blur}) saturate(${saturate})`,
    opacity: opacity,
    border: `${borderWidth}px solid ${borderColor}`,
    boxShadow,
    transition: `${transition}`,
    transform: hover.value && !disableHoverEffect ? `scale(${scale})` : 'none',
  }
})
</script>


<style scoped>
.glassmorphism {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
</style>
